<template>
  <header>
    <div class="wrapper">
      <nav>
        <!-- 传统的写法 -> router-link默认解析为a标签 -->
        <RouterLink to="/">Home</RouterLink> | 
        <RouterLink  to="/about" >About</RouterLink>  |
        <RouterLink  to="/pinia" >Pinia</RouterLink>  |
        <RouterLink  to="/pinia/better" >PiniaBetter</RouterLink>  |

        <!-- Vue3 -> RouterLink新增插槽作用域写法(vue2也可以) -->
        <!-- custom 默认(false)   是否应该将其内容包裹在 <a> 元素中 ,通常配合插槽作用域使用 =>  -->
        <!-- <router-link> 通过一个作用域插槽暴露底层的定制能力。这是一个更高阶的 API，主要面向库作者，但也可以为开发者提供便利，大多数情况下用在一个类似 NavLink 这样的组件里。
           <router-link
              to="/about"
              custom
              v-slot="{ href, route, navigate, isActive, isExactActive }"
            >
            href：解析后的 URL。将会作为一个 <a> 元素的 href 属性。如果什么都没提供，则它会包含 base。
            route：解析后的规范化的地址。
            navigate：触发导航的函数。 会在必要时自动阻止事件，和 router-link 一样。例如：ctrl 或者 cmd + 点击仍然会被 navigate 忽略。
            isActive：如果需要应用 active class，则为 true。允许应用一个任意的 class。
            isExactActive：如果需要应用 exact active class，则为 true。允许应用一个任意的 class。
         -->
        <RouterLink custom to="/404" v-slot="{ href, route, navigate, isActive, isExactActive }">
            <!-- <a :href="href">404</a> -->
            <!-- <span @click="$router.push('/404')">404</span> -->
            <span @click="navigate" :class="isActive?'active':''">404</span>
        </RouterLink>   |

        <!-- <NavLink to="https://www.baidu.com" a="1" b="2">百度</NavLink>   | -->
        <!-- <NavLink to="/404">跳转404</NavLink> -->

      </nav>
    </div>
  </header>
  <br>
  <RouterView />
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import NavLink from './components/NavLink.vue';
</script>

<style scoped>
  .active{
    color:red
  }
  .router-link-active{
    color:red
  }
</style>
